<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FFmpeg 本地视频分析播放器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto px-4 py-8">
        <div class="max-w-4xl mx-auto">
            <!-- 标题 -->
            <div class="text-center mb-8">
                <h1 class="text-4xl font-bold text-gray-800 mb-2">
                    <i class="fas fa-video text-blue-600"></i>
                    FFmpeg 本地视频分析播放器
                </h1>
                <p class="text-gray-600">轻量级本地视频分析工具，支持信息查看、逐帧解码和播放</p>
            </div>

            <!-- 功能卡片 -->
            <div class="grid md:grid-cols-3 gap-6 mb-8">
                <!-- 视频信息 -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="text-center">
                        <i class="fas fa-info-circle text-3xl text-blue-500 mb-3"></i>
                        <h3 class="text-xl font-semibold mb-2">视频信息</h3>
                        <p class="text-gray-600 text-sm mb-4">查看视频时长、分辨率、帧率等关键信息</p>
                        <code class="bg-gray-100 px-3 py-1 rounded text-sm">
                            ./bin/video_info test.mp4
                        </code>
                    </div>
                </div>

                <!-- 逐帧解码 -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="text-center">
                        <i class="fas fa-images text-3xl text-green-500 mb-3"></i>
                        <h3 class="text-xl font-semibold mb-2">逐帧解码</h3>
                        <p class="text-gray-600 text-sm mb-4">精确解码任意帧，保存为PPM格式图片</p>
                        <code class="bg-gray-100 px-3 py-1 rounded text-sm">
                            ./bin/frame_decoder test.mp4 100
                        </code>
                    </div>
                </div>

                <!-- 视频播放 -->
                <div class="bg-white rounded-lg shadow-md p-6">
                    <div class="text-center">
                        <i class="fas fa-play-circle text-3xl text-red-500 mb-3"></i>
                        <h3 class="text-xl font-semibold mb-2">视频播放</h3>
                        <p class="text-gray-600 text-sm mb-4">基于SDL2的简易播放器，支持播放控制</p>
                        <code class="bg-gray-100 px-3 py-1 rounded text-sm">
                            ./bin/video_player test.mp4
                        </code>
                    </div>
                </div>
            </div>

            <!-- 快速开始 -->
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold mb-4">
                    <i class="fas fa-rocket text-blue-600"></i>
                    快速开始
                </h2>
                
                <div class="space-y-4">
                    <div>
                        <h3 class="font-semibold text-lg mb-2">1. 环境准备</h3>
                        <div class="bg-gray-50 p-4 rounded">
                            <p class="text-sm text-gray-700 mb-2">根据系统安装依赖：</p>
                            <div class="grid md:grid-cols-3 gap-2 text-xs">
                                <div class="bg-blue-50 p-2 rounded">
                                    <strong>Ubuntu/Debian:</strong><br>
                                    sudo apt install cmake build-essential pkg-config libsdl2-dev
                                </div>
                                <div class="bg-green-50 p-2 rounded">
                                    <strong>macOS:</strong><br>
                                    brew install cmake pkg-config sdl2
                                </div>
                                <div class="bg-purple-50 p-2 rounded">
                                    <strong>Windows:</strong><br>
                                    pacman -S mingw-w64-x86_64-cmake mingw-w64-x86_64-SDL2
                                </div>
                            </div>
                        </div>
                    </div>

                    <div>
                        <h3 class="font-semibold text-lg mb-2">2. 一键编译</h3>
                        <div class="bg-gray-900 text-green-400 p-4 rounded font-mono text-sm">
                            chmod +x build.sh<br>
                            ./build.sh
                        </div>
                    </div>

                    <div>
                        <h3 class="font-semibold text-lg mb-2">3. 开始使用</h3>
                        <p class="text-gray-600">编译完成后，可执行文件位于 <code class="bg-gray-200 px-2 py-1 rounded">bin/</code> 目录</p>
                    </div>
                </div>
            </div>

            <!-- 项目结构 -->
            <div class="bg-white rounded-lg shadow-md p-6 mt-6">
                <h2 class="text-2xl font-bold mb-4">
                    <i class="fas fa-folder-tree text-blue-600"></i>
                    项目结构
                </h2>
                <div class="bg-gray-50 p-4 rounded font-mono text-sm">
                    <div class="text-green-600">ffmpeg_demo/</div>
                    <div class="ml-4 text-blue-600">├── ffmpeg-5.1/</div>
                    <div class="ml-4 text-blue-600">├── ffmpeg-build/</div>
                    <div class="ml-8 text-gray-600">├── include/</div>
                    <div class="ml-8 text-gray-600">└── lib/</div>
                    <div class="ml-4 text-blue-600">├── src/</div>
                    <div class="ml-8 text-gray-600">├── video_info.cpp</div>
                    <div class="ml-8 text-gray-600">├── frame_decoder.cpp</div>
                    <div class="ml-8 text-gray-600">├── video_player.cpp</div>
                    <div class="ml-8 text-gray-600">└── common.h</div>
                    <div class="ml-4 text-blue-600">├── bin/</div>
                    <div class="ml-4 text-blue-600">├── include/</div>
                    <div class="ml-4 text-blue-600">├── lib/</div>
                    <div class="ml-4 text-blue-600">├── build.sh</div>
                    <div class="ml-4 text-blue-600">├── CMakeLists.txt</div>
                    <div class="ml-4 text-blue-600">├── test.mp4</div>
                    <div class="ml-4 text-blue-600">└── README.md</div>
                </div>
            </div>

            <!-- 技术栈 -->
            <div class="bg-white rounded-lg shadow-md p-6 mt-6">
                <h2 class="text-2xl font-bold mb-4">
                    <i class="fas fa-cogs text-blue-600"></i>
                    技术栈
                </h2>
                <div class="grid md:grid-cols-2 gap-4">
                    <div>
                        <h3 class="font-semibold mb-2">后端技术</h3>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">C++17</span>
                            <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">FFmpeg 5.1</span>
                            <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">SDL2</span>
                            <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">CMake 3.20+</span>
                        </div>
                    </div>
                    <div>
                        <h3 class="font-semibold mb-2">支持平台</h3>
                        <div class="flex flex-wrap gap-2">
                            <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Linux</span>
                            <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">macOS</span>
                            <span class="bg-gray-100 px-3 py-1 rounded-full text-sm">Windows (WSL)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
